<template>
  <div>
	<myheader></myheader>

	<section class="cart text-center">
		<div class="container">
			<div class="row">
				<div class="col-sm-6 mb-3 mb-m-1 text-md-left"><a href="catalog.html"><i class="fas fa-arrow-left mr-2"></i> Continue Shopping</a></div>
				<div class="col-sm-6 text-md-right"><a href="catalog.html" class="btn btn-primary btn-lg pl-5 pr-5">Checkout</a></div>
			</div>
			<div class="row">
				<div class="col-12 text-center">
					<h2 class="mt-5 mb-2">Your Shopping Cart</h2>
					<p class="mb-5"><span class="primary-color">3</span> Items in your cart</p>
					<table id="cart" class="table table-condensed" >
						<thead>
							<tr>
								<th style="width:60%">Product</th>
								<th style="width:12%">Price</th>
								<th style="width:10%">Quantity</th>
								<th style="width:16%"></th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in cartlist" :key="index">
								<td data-th="Product">
									<div class="row">
										<div class="col-md-3 text-left">
											<img :src="adminurl+'/static/upload/'+item.img" alt="" class="img-fluid">
										</div>
										<div class="col-md-9 text-left mt-sm-2">
											<h4>{{item.name}}</h4>
											<p>York &amp; Smith</p>
										</div>
									</div>
								</td>
								<td data-th="Price">${{item.price}}</td>
								<td data-th="Quantity">
									<input type="number" class="form-control text-center" v-model="item.num">
								</td>
								<td class="actions" data-th="">
									<div class="text-right">
										<button class="btn btn-white btn-md mb-2" @click="changenum(index,'+')"><i class="fas fa-sync">+</i></button>
										<button class="btn btn-white btn-md mb-2" @click="changenum(index,'-')"><i class="fas fa-trash">-</i></button>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
					<div class="float-right text-right">
						<h4>Subtotal:</h4>
						<h1>$147.00</h1>
						<p>(Excluding Delivery)</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6 mb-3 mb-m-1 text-md-left"><a href="catalog.html"><i class="fas fa-arrow-left mr-2"></i> Continue Shopping</a></div>
				<div class="col-sm-6 text-md-right"><a href="catalog.html" class="btn btn-primary btn-lg pl-5 pr-5">Checkout</a></div>
			</div>
		</div>
	</section>
	
	<myfooner></myfooner>
    
  </div>
  
</template>


 
<script>
import myheader from './myheader'
import myfooner from './myfooner'
import {config} from '../config'

export default {
  data () {
    return {
	  adminurl:config['adminurl'],
	  msg: "这是一个变量",
	  cartlist:[]
    }
  },
  mounted:function(){
  var cart = JSON.parse(localStorage.getItem('cartlist'))
		if(cart){
			this.cartlist = cart
		}
},
  methods:{
	  del_one(index){
		  this.cartlist.splice(index,1)
	  },
	  changenum(index,type){
		  if(type == '+'){
			  this.cartlist[index].num++
		  }else{
			  if(this.cartlist[index].num > 1){
				  this.cartlist[index].num--
			  } else{
				  this.del_one(index)
			  }
		  }
		  localStorage.setItem('cartlist',JSON.stringify(this.cartlist))
	  },
     
  },
  components:{
	  "myheader":myheader,
	  "myfooner":myfooner

  },
}


</script>
 
<style>



</style>